<template>
  <div class="Lmenu">
      <el-scrollbar style="height: 100%" wrap-class="list" wrap-style="overflow-x:hidden;">
      <el-menu class="el-menu-vertical-demo" :collapse="getIsCollapse">
          <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">主页</span>
          </el-menu-item>
          <el-menu-item index="2">
              <i class="el-icon-news"></i>
              <span slot="title">Banner管理</span>
          </el-menu-item>
          <el-menu-item index="3">
              <i class="el-icon-tickets"></i>
              <span slot="title">订单管理</span>
          </el-menu-item>
          <el-submenu index="4">
              <template slot="title">
                  <i class="el-icon-phone-outline"></i>
                  <span slot="title">客户管理</span>
              </template>
              <el-menu-item-group>
                  <el-submenu index="4-1">
                      <span slot="title">用户管理</span>
                      <el-menu-item index="4-1-1">用户管理</el-menu-item>
                      <el-menu-item index="4-1-2">车主卡</el-menu-item>
                  </el-submenu>
                  <el-menu-item index="4-2">司机管理</el-menu-item>
              </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
              <template slot="title">
                  <i class="el-icon-phone-outline"></i>
                  <span slot="title">内容管理</span>
              </template>
              <el-menu-item-group>
                  <el-menu-item index="5-1">汽车品牌</el-menu-item>
                  <el-submenu index="5-2">
                      <span slot="title">门店管理</span>
                      <el-menu-item index="5-2-1">4S店管理</el-menu-item>
                      <el-menu-item index="5-2-2">修理厂管理</el-menu-item>
                      <el-menu-item index="5-2-3">快修店管理</el-menu-item>
                  </el-submenu>
              </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="6">
              <i class="el-icon-bell"></i>
              <span slot="title">保险管理</span>
          </el-menu-item>
          <el-submenu index="7">
              <template slot="title">
                  <i class="el-icon-phone-outline"></i>
                  <span slot="title">设置</span>
              </template>
              <el-menu-item-group>
                  <el-menu-item index="7-1">权限管理</el-menu-item>
              </el-menu-item-group>
          </el-submenu>
      </el-menu>
      </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "leftMenu",
  computed: {
    ...mapGetters(["getIsCollapse"])
  }
}

</script>

<style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
    .Lmenu{
        height: 600px;
        background-color: rgb(50,65,87);
        overflow: hidden;
    }
    .el-menu-item-group__title{
        padding: 0 !important;
    }
    .el-menu{
        background-color: rgb(50,65,87) !important;
    }
    span{
        color: #C4C4C4
    }
    .el-menu-item, .el-submenu__title{
        margin: 10px 0;
        color: rgb(191, 196, 206) !important;
    }
</style>